<template>
    <Modal id="uidesign" v-if="enabled" v-model="enabled" fullscreen footer-hide :mask="false" :closable="false"
        class-name="uidesign-modal">
        <template #header>
            <div style="width: 100%;display: flex;flex-direction: row;">
                <strong style="width:120px;display: inline-block;display: flex;align-items: center;">
                    <span style="cursor: pointer;" @click="enabled=false">
                        <Icon type="md-arrow-round-back" size="22" />
                    </span>
                    {{$t('用户界面设计')}}
                </strong>
                <div id="uidesign-tools">
                    <div style="display: flex;flex-direction: row;">
                        <div class="toolItem" style="display: flex;flex-direction: row;">
                            <Button @click="addLayer" style="border-radius:5px 0 0 5px ;">
                                <Icon type="md-albums" />
                                {{$t('新建图层')}}
                            </Button>
                            <Dropdown trigger="click">
                                <Button style="border-radius:0 5px 5px 0;">
                                    <Icon type="ios-arrow-down" />
                                </Button>
                                <template #list>
                                    模板列表
                                </template>
                            </Dropdown>
                        </div>
                        <Button class="toolItem" @click="addContainer">
                            {{$t('添加容器')}}
                        </Button>
                    </div>
                    <div>
                        <Dropdown trigger="click" @on-click="zoom">
                            <div class="toolItem">
                                {{(this.currentPage.scale*100).toFixed(2)}}%
                                <Icon type="ios-arrow-down"></Icon>
                            </div>
                            <template #list>
                                <DropdownMenu>
                                    <DropdownItem name="zoomIn">{{$t('放大')}}</DropdownItem>
                                    <DropdownItem name="zoomOut">{{$t('缩小')}}</DropdownItem>
                                    <DropdownItem name="zoomToFitWidth">{{$t('适合窗口宽度')}}</DropdownItem>
                                    <DropdownItem name="zoomToFitHeight">{{$t('适合窗口高度')}}</DropdownItem>
                                    <DropdownItem name="50%">50%</DropdownItem>
                                    <DropdownItem name="100%">100%</DropdownItem>
                                    <DropdownItem name="150%">150%</DropdownItem>
                                    <DropdownItem name="200%">200%</DropdownItem>
                                    <DropdownItem name="showAllLayers">{{$t('显示全部图层')}}</DropdownItem>
                                </DropdownMenu>
                            </template>
                        </Dropdown>
                    </div>
                </div>
            </div>
        </template>
        <link href="./components/UIBuilder/style.css" rel="stylesheet" />
        <Layout id="uidesign-layout">
            <Sider width="250" class="uidesign-layout-sider uidesign-layout-sider-left">
                <div style="display: flex;flex-direction: column;">
                    <div style="display: flex;flex-direction: row;color:#aaa">
                        <div style="margin:15px" :title="$t('搜索')">
                            <Icon size="20" type="md-search" />
                        </div>
                        <div style="margin:15px;color:#000f" :title="$t('图层')">
                            <Icon size="20" type="md-albums" />
                        </div>
                        <div style="margin:15px" :title="$t('资产')">
                            <Icon size="20" type="md-images" />
                        </div>

                        <Button type="text" size="small" style="margin:15px" @click="showPageList=!showPageList">
                            {{currentPage?currentPage.name:$t('页面')}}
                            <Icon v-if="showPageList" type="ios-arrow-up"></Icon>
                            <Icon v-else type="ios-arrow-down"></Icon>
                        </Button>
                    </div>
                    <div v-show="showPageList"
                        style="display: flex;flex-direction:column;padding-left:16px;border-bottom: 1px #0005 solid;">
                        <div style=" display: flex;justify-content: space-between;align-items: center;">
                            <span style="font-weight: 600;">{{$t('页面')}}</span>
                            <Button type="text" size="small" @click="addPage">
                                <Icon type="md-add" size="22" />
                            </Button>
                        </div>
                        <div style="display: flex;flex-direction: column;">
                            <div v-for="page in data.pages" :key="page.id"
                                style="display: flex;justify-content: flex-start;align-items: center"
                                @contextmenu.prevent="showPageContextMenu($event,page)">
                                <div style="width:22px;height:22px;">
                                    <Icon v-if="page==currentPage" type="md-checkmark" />
                                </div>
                                <span style="cursor: default;" @click="changePage(page)">{{page.name}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="hideExpendIcon no-focused-outline" @keydown="handleKeyDown" @keyup="handleKeyUp"
                        tabindex="0">
                        <Tree :data="currentPage?currentPage.tree:[]" select-node :multiple="isShiftPressed"
                            @on-contextmenu="handleContentContentContextMenu" :render="treeRender">
                            <template #contextMenu>
                                <DropdownItem @click="renameContent">{{$t('重命名')}}</DropdownItem>
                                <DropdownItem v-if="contextMenuSelectedElement"
                                    v-show="contextMenuSelectedElement.type=='layer'" @click="addToTemplate">
                                    {{$t('添加到模板')}}</DropdownItem>
                                <DropdownItem @click="deleteContent" style="color: #ed4014">{{$t('删除')}}</DropdownItem>
                            </template>
                        </Tree>
                    </div>
                </div>
            </Sider>
            <Content class="uidesign-layout-content" tabindex="0" @wheel="layerContainerWheel"
                @mousedown="layerContainerDragStart" @mousemove="layerContainerMouseMove"
                @mouseup="layerContainerDragEnd" @mouseleave="layerContainerDragEnd" @keydown="canvasKeyDown">
                <div style="width:100%;height:100%;" ref="uidesignLayoutContent">
                    <div class="layer-container" ref="layerContainer" :style="currentPage?.layerContainerStyle">
                        <template v-if="currentPage?.tree">
                            <template v-for="(layer , i) in currentPage.tree" :key="layer.id">
                                <div style="display:flex;flex-direction:column;">
                                    <span class="layer-name" :style="layerNameStyle(layer,i)"
                                        @click="selectedElement = layer">{{layer.title}}</span>
                                    <div :class="layerClass(layer,i)" @mousemove="layerMouseMove"
                                        @mouseout="layerMouseOut" :style="layerStyle(layer,i)"
                                        @click="onClickOnNode(layer)">
                                        <UIBuilderRT :page="layer" :override="RTOverride"></UIBuilderRT>
                                    </div>
                                </div>
                            </template>
                        </template>
                    </div>
                </div>
                <div id="uidesign-ruler-corner" class="uidesign-ruler"></div>
                <div id="uidesign-ruler-top" class="uidesign-ruler"></div>
                <div id="uidesign-ruler-left" class="uidesign-ruler"></div>
            </Content>
            <Sider width="250" class="uidesign-layout-sider uidesign-layout-sider-right">
                <DefaultElementEditor :element="selectedElement"></DefaultElementEditor>
            </Sider>
        </Layout>
        <div id="pageContextMenu" v-if="pageContextMenuFor" transfer
            style="position: fixed;left:0;top:0;margin:0;padding:0;height:100vh;width:100vw;"
            @click="pageContextMenuFor=null" @blur="pageContextMenuFor=null">
            <div ref="pageContextMenu"
                style="position: fixed;display: flex;flex-direction:column;background-color: white;border:1px black solid;border-radius: 4px;padding:5px 0;align-items: baseline;">
                <a class="contextMenuItem" @click="renamePage(pageContextMenuFor)">
                    {{$t('重命名')}}
                </a>
            </div>
        </div>
    </Modal>
</template>